<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<table class="layui-hide" id="menu-list-id" lay-filter="menu-list-filter"></table>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>

			layui.use(function(){

				let treeTable = layui.treeTable;
				let table = layui.table;
				let form = layui.form;
				let $ = layui.$;

				form.on('switch(switchStatus)', function(obj){					
					let elem = obj.elem;
					let menu = {};
					menu.id = elem.value;
					menu.status = elem.checked?1:0;

					if(menu.status==1){
						//启用，父节点被禁用时不允许启用
						$.getJSON('http://127.0.0.1:8080/getMenu', {id: menu.id}, function(res){
							if(res.code==0){
								let menuSelf = res.data;
								if(menuSelf.level==1){
									updateMenu(menu, function(res){
										if(!res){
											elem.checked=!elem.checked;
											form.render('checkbox');
										}
									});
								}else{
									$.getJSON('http://127.0.0.1:8080/getMenu', {id: menuSelf.parentId}, function(res){
										if(res.code==0){
											if(res.data.status==0){
												layer.msg('父节点不可用，不允许启用');
												elem.checked=!elem.checked;
												form.render('checkbox');
											}else{
												updateMenu(menu, function(res){
													if(!res){
														elem.checked=!elem.checked;
														form.render('checkbox');
													}
												});
											}
										}else{
											layer.msg(res.msg);
											elem.checked=!elem.checked;
											form.render('checkbox');
										}
									});
								}
							}else{
								layer.msg(res.msg);
								elem.checked=!elem.checked;
								form.render('checkbox');
							}
						});
					}else if(menu.status==0){
						//禁用，子节点可用时不允许禁用
						$.getJSON('http://127.0.0.1:8080/getEnabledChildMenuList', {id: menu.id}, function(res){
							if(res.code==0){
								let children = res.data;
								if(children && children.length>0){
									layer.msg('该节点有可用子节点，不允许禁用');
									elem.checked=!elem.checked;
									form.render('checkbox');
								}else{
									updateMenu(menu, function(res){
										if(!ress){
											elem.checked=!elem.checked;
											form.render('checkbox');
										}
									});
								}
							}else{
								layer.msg(res.msg);
								elem.checked=!elem.checked;
								form.render('checkbox');
							}
						});
					}

					
				});

				function updateMenu(menu, callback){
					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8080/updateMenu',
						data: JSON.stringify(menu),
						contentType: 'application/json',
						dataType: 'json',
						success: function(res){
							if(res.code==0){
								layer.msg('菜单状态更新成功');
								callback(true);
							}else{
								layer.msg(res.msg);
								callback(false);
							}
						}
					});
				}

				table.on('tool(menu-list-filter)', function(obj){
					let event = obj.event;
					if(event==='add'){
						layer.open({
							type: 2,
							title: '添加菜单',
							area: ['400px', '585px'],
							content: './menu-add.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('menu-list-id');
							},
							success: function(layero, index, that){
								let body = layer.getChildFrame('body', index);								
								body.find('#parentId').val(obj.data.id);
								body.find('#level').val(obj.data.level+1);
							}
						});
					}else if(event==='edit'){
						layer.open({
							type: 2,
							title: '编辑菜单',
							area: ['400px', '530px'],
							content: './menu-edit.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('menu-list-id');
							},
							success: function(layero, index, that){
								let iframeWindow = window[layero.find('iframe')[0].name];
								iframeWindow.postMessage(obj.data);
							}
						});
					}
				});

				table.on('toolbar(menu-list-filter)', function(obj){
					let event = obj.event;
					if(event==='add'){
						layer.open({
							type: 2,
							title: '添加菜单',
							area: ['400px', '585px'],
							content: './menu-add.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('menu-list-id');
							},
							success: function(layero, index, that){
								let body = layer.getChildFrame('body', index);								
								body.find('#parentId').val(0);
								body.find('#level').val(1);
							}
						});
					}
				});

				treeTable.render({
					elem: '#menu-list-id',
					url: 'http://127.0.0.1:8080/getMenuList',
					tree: {						
						customName: {
							name: 'title',	//children、id、pid都有默认值，默认值刚好都是Menu的属性值，所有这里没有设置
							//icon: ''		//icon的默认值为Menu.icon，Menu.icon必须是完整的，如<i class="layui-icon layui-icon-folder"></i>，才会显示图标，如果只有layui-icon-folder，则会显示成文字
											//把icon设置为''，则会显示默认的图标：<i class="layui-icon layui-icon-folder"></i>和<i class="layui-icon layui-icon-leaf"></i>
						},
						view: {
							showIcon: false	//这里可以设置不显示icon
						}
					},
					toolbar: `
						<div>
							<button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加一级菜单</button>
						</div>
					`,
					cols: [[
						{
							title: '菜单id',
							field: 'id'
						},
						{
							title: '菜单名',
							field: 'title'
						},
						{
							title: '图标',
							templet: function(d){
								return '<i class="layui-icon '+d.icon+'"></i>';		//field: 'icon'只会显示文字，如，这样才会显示对应的图标
							}		
						},
						{
							title: '菜单类型',
							templet: function(d){
								return d.type==1?'页面':'目录';
							}
						},
						{
							title: '页面类型',
							field: 'openType'
						},
						{
							title: '页面地址',
							field: 'href'
						},
						{
							title: '层级',
							field: 'level'
						},
						{
							title: '状态',
							templet: function(d){
								return '<input type="checkbox" name="status" value="'+d.id+'" lay-skin="switch" lay-filter="switchStatus" title="正常|禁用"'+(d.status==1?'checked':'')+'>';
							}
						},
						{
							title: '更新时间',
							field: 'updateTime'
						},
						{
							title: '操作',							
							templet: function(d){
								let s = '';
								if(d.level<=2){
									s +='<button type="button" class="layui-btn layui-btn-xs" lay-event="add">添加</button>';
								}
								s +='<button type="button" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">编辑</button>';
								return s;
							}
						}
					]]					
				});

			});

		</script>
	</body>
</html>
